<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>MyCAT EYE-mycat setting server</title>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/jquery.mloading.css" />
    <link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css" />
    <link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" title="" type="text/css" />
    <link title="" href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="">
                <a class="mystyle-color" href="../index.html">MyCAT EYE&nbsp;&nbsp;&nbsp;</a>
            </li>
        </ul>
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown" style="min-width:165px;">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mysql：
                    <span id="currentServerId" data-value="">所属节点</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="ulNodeList">
                    <li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mycat：
                    <span id="mycat_server" data-value="">所属节点</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="ulMycatList">
                    <li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
                </ul>
            </li>
            <li class="dropdown li-border">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
                    &nbsp;<span id="login_admin"></span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)" id="modifyPassword">修改密码</a></li>
                    <li><a href="javascript:void(0)" id="logout">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div class="down-main">
    <div class="left-main left-full">
        <div class="sidebar-fold">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
        </div>
        <div class="subNavBox">
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span><span
                        class="sublist-title">常用功能</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />控制台
                        </div>
                        <a href="dashboard.html">
                            <span class="sublist-icon fa fa-dashboard"></span>
                            <span class="sub-title">控制台</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />变量管理
                        </div>
                        <a href="var-manage.html">
                            <span class="sublist-icon fa fa-dot-circle-o"></span>
                            <span class="sub-title">变量管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">InnoDB引擎</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />基本状态
                        </div>
                        <a href="innodb-status.html">
                            <span class="sublist-icon fa fa-heartbeat"></span>
                            <span class="sub-title">基本状态</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />事务查看
                        </div>
                        <a href="innodb-trx.html">
                            <span class="sublist-icon fa fa-retweet"></span>
                            <span class="sub-title">事务查看</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />锁等待信息
                        </div>
                        <a href="innodb-lockwaits.html">
                            <span class="sublist-icon fa fa-lock"></span>
                            <span class="sub-title">锁等待信息</span></a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">Mysql管理</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mysql集群管理
                        </div>
                        <a href="cluster-manage.html">
                            <span class="sublist-icon fa fa-list"></span>
                            <span class="sub-title">Mysql集群管理</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mysql节点管理
                        </div>
                        <a href="node-manage.html">
                            <span class="sublist-icon fa fa-cubes"></span>
                            <span class="sub-title">Mysql节点管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">Mycat管理</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mycat集群管理
                        </div>
                        <a href="mycat-cluster.html">
                            <span class="sublist-icon fa fa-database"></span>
                            <span class="sub-title">Mycat集群管理</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mycat节点管理
                        </div>
                        <a href="mycat-node.html">
                            <span class="sublist-icon fa fa-cube"></span>
                            <span class="sub-title">Mycat节点管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">设置</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />系统属性
                        </div>
                        <a href="mycat-setting-myid.html">
                            <span class="sublist-icon fa fa-ban"></span>
                            <span class="sub-title">系统属性</span>
                        </a>
                    </li>
                    <li class="active">
                        <div class="showtitle">
                            <img src="img/leftimg.png" />参数配置
                        </div>
                        <a href="mycat-setting-server.html">
                            <span class="sublist-icon fa fa-list-alt"></span>
                            <span class="sub-title">参数配置</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />数据源设置
                        </div>
                        <a href="mycat-setting-mycat-schema.html">
                            <span class="sublist-icon fa fa-cloud"></span>
                            <span class="sub-title">数据源设置</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />分片设置
                        </div>
                        <a href="mycat-setting-rule.html">
                            <span class="sublist-icon fa fa-share"></span>
                            <span class="sub-title">分片设置</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="right-product right-full">
        <div class="container-fluid">
            <div class="info-center">
                <div class="page-header">
                    <div class="pull-left">
                        <h4>参数配置</h4>
                    </div>
                    <div class="pull-right mt10">
                        ...
                    </div>
                </div>

                <div class="panel panel-default panel-intro table-margin">
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane fade active in" id="one">
                                <div class="widget-body no-padding" id="mycatDataHostTableContainer">
                                    <div class=""><h4><span>数据源</span></h4></div>
                                    <div class="manage-detail">
                                        <div class="margin-tb manage-detail-con clearfix">
                                            <a class="h5 custom pull-left" id="btnAddDataHost" href="javascript:;">新增逻辑节点</a>
                                            <a class="h5 custom pull-right margin-min-15" id="getFromZk" href="javascript:void(0);">从zk获取配置</a>
                                            <a class="h5 custom pull-right margin-min-15" id="saveToDB" href="javascript:void(0);">保存后端数据库</a>
                                            <a class="h5 custom pull-right margin-min-15" id="saveToZk" href="javascript:void(0);">保存到ZK</a>
                                        </div>
                                    </div>
                                    <table class="table table-striped" id="myDataNodeHostModalContainer">
                                        <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>dataBase</th>
                                            <th>dataHost</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                    </table>

                                </div>

                                <div class="" id="container">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade myModal" id="myModal" tabindex="0" role="dialog" aria-labelledby="myModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myHostLabel"><span>新增</span>逻辑节点</h5>
                <button type="button" class="fa fa-close close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <div class="form-horizontal" id="editDataNodeHostModalContainer">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-info btn-submit editOrAddDataNodeHost">提交</button>
            </div>
        </div>
    </div>
</div>



<!-- javascript -->
<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="script/bootbox.min.js" type="text/javascript"></script>
<script src="script/jquery.dataTables.min.js"></script>
<!-- loading效果 -->
<script src="script/jquery.mloading.js"></script>
<!-- 自定义javascript -->
<script src="script/custom/menu.js"></script>
<script src="script/custom/login-auth.js"></script>
<script src="script/custom/modify-password.js"></script>
<script src="script/custom/current-node.js"></script>
<script src="../assets/js/utils.js"></script>
<script src="script/juicer-min.js"></script>
<script src="script/layer/layer.js"></script>

<!-- dataHost模板 -->
<script id="tmpl" type="text/template">
    <div class="form-horizontal">
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">name：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${name}" name="name" data-old-name="${name}"/>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">database：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${database}" name="database" />
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">dataHost：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${dataHost}" name="dataHost" />
            </div>
        </div>
    </div>

</script>

<script id="dataHostTpl" type="text/template">
    <div  class="form-group mt10">
        <!--<label class="col-sm-2 control-label">${writeHostName}的readHost：</label>-->
        <div class="manage-detail">
            <div class="margin-tb manage-detail-con clearfix">
                <a class="h5 custom pull-left" id="btnAdReadDataHost" data-type="readDataHost" data-data_host_name="${dataHostName}" href="javascript:;">新增readHost</a>
            </div>
        </div>
    </div>
    <div  class="form-group mt10">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-10">
            <table class="form-horizontal table " >
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>host</th>
                    <th>url</th>
                    <th>编辑</th>
                </tr>
                </thead>

                <tbody>
                {@if readHost.length==0}
                <tr align="center"><td colspan="7"><font color="red">暂无相关readHost</font></td></tr>
                {@/if}
                {@each readHost as item,i}
                <tr>
                    <td>${item.user}</td>
                    <td>${item.password}</td>
                    <td>${item.host}</td>
                    <td>${item.url}</td>
                    <td>
                        <a href="javascript:void(0)" data-read_host_name="${item.host}"
                           data-type="readHostType" data-write_host_name="${writeHostName}"
                           data-data_host_name="${dataHostName}" class="btn-edit text-info editDataNodeHost" data-name=""><i class="fa fa-edit"></i> 编辑</a>
                    </td>
                </tr>
                {@/each}
                </tbody>
            </table>
        </div>
    </div>

</script>

<script type="text/javascript">
    var table;
    var dataNodeMap ={};

    function fetchData(forceFromZk) {
        if(table){
            for(var attr in dataNodeMap) {
                delete dataNodeMap[attr];
            }
            table.destroy();
        }
        table = $('#myDataNodeHostModalContainer').DataTable({
            'oLanguage': dtb.oLanguage,
            'ajax': {
                "url": String.format("/mycat/zk/{0}/schema/dataNode",getParameter("cluster")) ,
                "data":{
                    forceFromZk : forceFromZk?1:0
                },
                "dataSrc": function ( json ) {
                    if(json.code == 200){
                        if(typeof  json.data == "string"){
                            return JSON.parse(json.data);
                        }
                        return json.data;
                    } else{
                        layer.msg("请求失败！");
                    }
                    return [];
                }
            } ,
            'columns': [
                {'data': 'name'},
                {'data': 'database'},
                {'data': 'dataHost'}
            ],
            'columnDefs': [
                {
                    'render': function(data,type,row,pos){
                        dataNodeMap[row["name"]] = row;
                        return '<a href="javascript:void(0)" class="btn-del text-info" data-name="'+row['name']+'"  data-row="'+pos['row']+'"><i class="fa fa-trash-o"></i> 删除</a> ' +
                            '| <a href="javascript:void(0)" class="btn-edit text-info edit " data-name="'+row['name']+'"  data-row="'+pos['row']+'"><i class="fa fa-edit"></i> 编辑</a>' ;
                    },
                    'targets': 3
                },
                {"defaultContent": "",
                    "targets": "_all"}
            ],
            "drawCallback": function( settings ) {
               }
        });
    }
    fetchData();
    //getFromZk saveToDB saveToZk
    $("#getFromZk").bind("click",function () {
        fetchData(true);
    });
    //saveSchema
    $("#saveToZk").on("click", function () {
        var list = [];
        for(var schemaName in dataNodeMap) {
            list.push(dataNodeMap[schemaName]);
        }
        saveSchemaToRemote(String.format("/mycat/zk/{0}/schema/dataNode",getUrlParam("cluster")), list);
    });

    $("#saveToDB").on("click", function () {
        var list = [];
        for(var schemaName in dataNodeMap) {
            list.push(dataNodeMap[schemaName]);
        }
        saveSchemaToRemote(String.format("/mycat/zk/{0}/schema/updateLocalDataNode",getUrlParam("cluster")), list);
    });
    var saveSchemaToRemote = function (url, data) {
        $.ajax({
            url: url,
            method: 'post',
            data:{
                body : JSON.stringify(data)
            },
            success: function(res, status,jqxhr){
                if(res.code && res.code==200){
                    layer.msg("保存成功");
                    //fetchData();
                }else{
                    notifi.error('Error: '+res.message)
                }
            },
            error: function(err,status){
                console.log(err);
                notifi.error(err || err.message? err.message:'');
            }
        });
    };
    var myModal = $("#myModal");
    //新增 dataHost
    $("#btnAddDataHost").bind("click",function () {
        addOrEditDataHost($(this),"add");
    });

    $("#myDataNodeHostModalContainer").on("click",".edit", function () {
        addOrEditDataHost($(this),"edit");
    });
    var addOrEditDataHost = function (obj, type) {
        var  json = {type: type};
        if(type == "edit"){
            var name = obj.data("name");
            json = $.extend({type:type}, dataNodeMap[name] );
        }
        var html = juicer($("#tmpl").html(), json);
        $("#editDataNodeHostModalContainer").html(html);
        myModal.modal('show');
    }

    $("#mycatDataHostTableContainer").on( "click",".btn-del",function () {
        if(confirm("确定删除吗？")) {
            var name = $(this).data("name");
            $("#myDataNodeHostModalContainer").DataTable().row($(this).parents('tr')).remove().draw();
            delDataNodeHost(name);
        }

    });


    //封装数据结构
    var getDataNodeHost = function (dataNodeName) {
        return dataNodeMap[dataNodeName];
    }
    //添加一个dataHost
    var addDataNodeHost = function (oldDataNodeName, json) {
        if(oldDataNodeName == "") {
            dataNodeMap[json["name"]] = json;
        } else {
            var obj = dataNodeMap[oldDataNodeName];
            delete dataNodeMap[oldDataNodeName];
            dataNodeMap[json["name"]] = $.extend(obj, json);
        }
        return dataNodeMap[json["name"]];
    };

    var delDataNodeHost = function (dataNodeName) {
        delete dataNodeMap[dataNodeName] ;
    };
    
    $(".editOrAddDataNodeHost").click(function () {
        var obj  = {};
        $("#editDataNodeHostModalContainer").find("input").each(function () {
            var name = $(this).attr("name");
            var val = $(this).val();
            obj[name] = val;
        });
        var oldDataNodeHost =  $("#editDataNodeHostModalContainer").find("input[name='name']").data("old-name");
        obj = addDataNodeHost(oldDataNodeHost, obj);
        myModal.modal('hide');
        var target = $("a[data-name='"+oldDataNodeHost+"']"); //myDataNodeHostModalContainer
        var tableContainer = $("#myDataNodeHostModalContainer");
        if(oldDataNodeHost != ""){
            $('#myDataNodeHostModalContainer').DataTable().row(tableContainer.find("a[data-name='"+oldDataNodeHost+"']").parents("tr")).data(obj).draw(false);
        } else {
            //.DataTable().row.add(obj).draw(false);
            $('#myDataNodeHostModalContainer').DataTable().row.add(obj).draw(false);
        }

    })
</script>
</body>
</html>
